<template>
	<view style="background-color: #F5F5F5;height: 850px;">
		<view style="padding-top: 30px;">
			<image src="../../static/icon/d8e4a9c7370203390ffe6fb19e1ea36.jpg" mode="aspectFit"  style="margin-left: 50px;"></image>
		</view>
		<view class="view-passWord">
			<text class="password">手机号登录</text>
		</view>
		<view v-model="loginFrom">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" ref='myForm' :model="loginFrom">
				<u-form-item label="" prop="phone" borderBottom  style="width: 350px;margin-left:30px;margin-top:20px">
					<u--input v-model="loginFrom.phone" border="none" placeholder="请输入您的手机号">
					</u--input>
				</u-form-item>
			</u--form>
			<!-- <view class="uni-form-item uni-column">
				<input class="uni-input" v-model="loginFrom.phone" focus placeholder="请输入您的手机号" />
			</view> -->
			<view class="uni-verification">
				<input class="uni-codeInput" type="text" v-model="loginFrom.code" placeholder="输入验证码" />
				<view class="sendCodeBtn" @click="sendCodeBtn">
					{{send?'发送验证码':second+'s重新发送'}}
				</view>
			</view>
		</view>
		<view>
			<button type="default" class="login-button" @click="Login">注册/登录</button>
		</view>
		<view>
			<button type="default" class="login-button" @click="AccountLogin">账号登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 验证手机号的规则
			var cheackMobile = (rule, value, cb) => {
				// 手机号一般最小以“13”开头
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入正确的手机号!'))
			}
			return {
				s: 60,	//默认倒计时
				second: 0,
				send: true, //按钮可以点击
				// 按钮里显示的文字
				content: '发送验证', 
				// 添加canClick
				canClick: true,
				// 登录输入框集合
				loginFrom:{
					// 用户手机号
					phone:'',
					// 验证码
					code:'',
				},
				// 自定义校验规则
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: cheackMobile,
							trigger: 'blur'
						}
					]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
			// 登录按钮
			Login () {
				this.$myRequest({
					url: '/eat-service/login/loginByPhoneCode',
					data: {
						phone: this.loginFrom.phone,
						code: this.loginFrom.code,
					}
				}).then(res => {
					if(res.data.flag){
						// token
						uni.setStorageSync('token',res.data.obj.token)
						// 登录账号
						uni.setStorageSync('userName',res.data.obj.user.userName)
						// 用户昵称
						uni.setStorageSync('nickName',res.data.obj.user.nickName)
						// 用户性别
						uni.setStorageSync('sex',res.data.obj.user.sex)
						// 用户年龄
						uni.setStorageSync('age',res.data.obj.user.age)
						// 用户电话
						uni.setStorageSync('phone',res.data.obj.user.phone)
						// 用户邮箱
						uni.setStorageSync('mail',res.data.obj.user.mail)
						// 用户生日
						uni.setStorageSync('birthday',res.data.obj.user.birthday)
						// 用户头像id
						uni.setStorageSync('avatarId',res.data.obj.user.avatarId)
						// 用户角色
						uni.setStorageSync('role',res.data.obj.user.role)
						// 用户id
						uni.setStorageSync('id',res.data.obj.user.id)
						// 登录成功跳转页面
						uni.switchTab({
							url: '/pages/home/home'
						})
						uni.showToast({
							title: '登录成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						window.location.reload();
					} else {
						uni.showToast({
							title: '登录失败',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			// 向手机发送验证码
			SendVerificationByPhone(){
				this.$myRequest({
					url: '/eat-service/shortMessage/SendVerificationByPhone',
					data: {
						phone: this.loginFrom.phone,
					}
				}).then(res => {
					if (res.data.code === '999') {
						
					}
				})
			},
			// 发送验证码倒计时
			sendCodeBtn: function() {
				this.SendVerificationByPhone()
				let that = this;
				// 防止多次重复点击
				if(!that.send){
					return false;
				}
				// 发送验证码
				that.send = false;
				uni.showToast({
					title:'发送成功',
					icon:'none',
					success: () => {
						this.time();	// 倒计时
					}
				})
			},
			// 倒计时
			time(){
				let that = this;
				that.second = that.s;
				let interval = setInterval(function(){
					if(that.second == 1){
						that.send = true;
						that.second = that.s;
						clearInterval(interval);
					}else {
					console.log(that.second)
						that.second--;
					}
				},1000)
			},
			// 切换账号密码登录
			AccountLogin () {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>
	
<style scoped>
	.uni-verification{
		margin: 0 auto;
		width: 350px;
		margin-top: 40px;
		
	}
	.sendCodeBtn{
		margin-left: 250px;
	}
	.disabled{
		background-color: #ddd;
		border-color: #ddd;
		color:#57a3f3;
		cursor: not-allowed;
	}
	.uni-button{
		float: left;
		margin-left: 250px;
	}
	.uni-codeInput{
		float: left;
		border-bottom: 1px solid #d1d1d1;
	}
	.uni-code{
		width: 250px;
		margin-top: 50px;
		border-bottom: 1px solid #d1d1d1;
	}
	.login-button{
		margin-top: 30px;
		width: 350px;
	}
	.view-passWord{
		margin-top: 60px;
		margin-left: 30px;
	}
	.password{
		font-size: 20px;
	}
	.uni-input{
		width: 350px;
		margin: 0 auto;
		margin-top: 50px;
		border-bottom: 1px solid #d1d1d1;
	}
</style>
